<template>
  <c-card class="orientation-chart">
    <div class="row">
      <a-select :options="options"
                v-model="selected"
                @change="selectChangeHandler"/>
      <div class="cost">
        {{ statusListTop.title }}
      </div>
      <div class="range">
        <div class="basis text-wr">
          同比 <span :class="['num',statusListTop.basisNegative?'negative':'']">{{ statusListTop.basis }}%</span>
        </div>
        <div class="ratio text-wr">
          环比 <span :class="['num',statusListTop.basisNegative?'negative':'']">{{ statusListTop.ratio }}%</span>
        </div>
      </div>
    </div>
    <div class="row status-bar">
      <div class="range" v-for="(item,index) in statusList" :key="index">
        <div class="range-title">
          {{ item.title }}
        </div>
        <div class="basis text-wr">
          同比 <span :class="['num',item.basisNegative?'negative':'']">{{ item.basis }}%</span>
        </div>
        <div class="ratio text-wr">
          环比 <span :class="['num',item.ratioNegative?'negative':'']">{{ item.ratio }}%</span>
        </div>
      </div>
    </div>
    <div class="row">
      <c-bar-multi :barData="chartData" v-if="chartData.xAxis.length" height="200px"/>
    </div>
  </c-card>
</template>

<script lang="ts">
import cBarMulti from "@/components/cBarMulti";
import {getDeptList} from "@/api/common.js";
import {controlFeeMonitoringChart, controlFeeMonitoringDataCompare} from "@/api/drgsGroupResults.js";
import {formatNumber} from "@/utils/transform";

export default {
  name: "orientationChart",
  components: {cBarMulti},
  inject: {
    timeParamsFormParent: {
      type: Object,
      default: () => ({})
    },
    getTimeParamsFormParent: {
      type: Object,
      default: () => () => ({})
    },
    depCodeFormParent: {
      type: String,
      default: ""
    },
    getDepCodeFormParent: {
      type: Function,
      default: () => () => ""
    },
  },
  props: {
    depCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      options: [],
      selected: '',
      statusListTop: {
        title: "次均费用 #元",
        titleDataKey: "timeFeeAvg",
        basis: '',
        basisDataKey: "oldTimeFeeAvg",
        ratio: "",
        ratioDataKey: "lastTimeFeeAvg"
      },
      statusList: [
        {
          title: "",
          titleBaseStr:"次均药品费 #元",
          titleDataKey: "drugFeeAvg",
          basis: '',
          basisDataKey: "oldDrugFeeAvg",
          ratio: "",
          ratioDataKey: "lastDrugFeeAvg"
        },
        {
          title: "",
          titleBaseStr:"次均材料费 #元",
          titleDataKey: "materialFeeAvg",
          basis: '',
          basisDataKey: "oldMaterialFeeAvg",
          ratio: "",
          ratioDataKey: "lastMaterialFeeAvg"
        },
        {
          title: "",
          titleBaseStr:"次均其他费 #元",
          titleDataKey: "otherFeeAvg",
          basis: '',
          basisDataKey: "oldOtherFeeAvg",
          ratio: "",
          ratioDataKey: "lastOtherFeeAvg"
        }
      ],
      chartData: {
        xAxis: [],
        dataList: [
          {title: '次均药品费', data: [], color: "#5467E6", dataKey: "drugFeeAvg"},
          {title: '次均材料费', data: [], color: "#FF8D49", dataKey: "materialFeeAvg"},
          {title: '次均其他费', data: [], color: "#55EFD3", dataKey: "otherFeeAvg"}
        ]
      },
      rateBaseData: {}
    }
  },
  computed: {
    reactiveGetTimeParamsFormParent() {
      return this.getTimeParamsFormParent();
    },
    reactiveGetDepCodeFormParent() {
      return this.getDepCodeFormParent();
    },
  },
  watch: {
    reactiveGetTimeParamsFormParent: {
      handler() {
        this.getData()
      },
      immediate: true
    },
    reactiveGetDepCodeFormParent: {
      handler() {
        this.getData()
      },
      immediate: true
    }
  },
  created() {
    this.getSelectList();
  },
  methods: {
    getData() {
      this.getControlFeeMonitoringChart();
      this.getControlFeeMonitoringDataCompare();
    },
    selectChangeHandler(e) {
      this.$emit('update:depCode', e);
    },
    async getSelectList() {
      const params = {};
      const res = await getDeptList(params);
      if (res['data'] && res.data.length > 0) {
        this.options = res['data'].map(({depCode: value, depName: label}) => ({value, label}));
        this.options.unshift({value: "", label: "全院"});
        this.selectChangeHandler(this.selected);
      }
    },
    async getControlFeeMonitoringChart() {
      const params = {
        depCode: this.selected,
        year: this.reactiveGetTimeParamsFormParent.year,
        month: this.reactiveGetTimeParamsFormParent.month
      }
      this.chartData.xAxis = [];
      const res = await controlFeeMonitoringChart(params);
      if (res['data'] && res['data'].length > 0) {
        this.chartData.xAxis = res['data'].map(item => item.months)
        this.chartData.dataList = this.chartData.dataList.map(item => ({
          ...item,
          data: res['data'].map(mItem => mItem[item.dataKey])
        }))
      }
    },
    async getControlFeeMonitoringDataCompare() {
      const params = {
        depCode: this.selected,
        year: this.reactiveGetTimeParamsFormParent.year,
        month: this.reactiveGetTimeParamsFormParent.month
      }
      const res = await controlFeeMonitoringDataCompare(params);
      if (res['data'] && 'data' in res['data'] && 'now' in res['data']) {
        this.rateBaseData = res['data'];
        this.statusList = this.statusList.map(item => formattingData(item));
        //上方独立统计数--均次费用
        this.statusListTop = formattingData(this.statusListTop);
      }

      function formattingData(target) {
        const basisBase = rateUtil(res['data']['data'][target.basisDataKey].toFixed(2));
        const ratioBase = rateUtil(res['data']['data'][target.ratioDataKey].toFixed(2));
        return {
          ...target,
          title: target.titleBaseStr.replace('#', formatNumber(res['data']['now'][target.titleDataKey])),
          basis: basisBase.value,
          basisNegative: basisBase.negative,
          ratio: ratioBase.value,
          ratioNegative: ratioBase.negative,
        }
      }

      function rateUtil(rate) {
        const temp = {negative: false, value: rate};
        if (/-/.test(rate)) {
          temp.negative = true;
        } else {
          temp.value = `+${temp.value}`;
        }
        return temp
      }
    },
  }
}
</script>

<style scoped lang="stylus">
>>> .ant-select {
  width: 250px;
  height: 24px;

  .ant-select-selection {
    height: 24px;

    .ant-select-selection__rendered {
      line-height: 24px;
      font-size: 12px;
      color: #484D78;
    }
  }
}

.orientation-chart {
  .row {
    display flex
    align-items center

    .cost {
      margin-left 20px
      font-weight bold
      font-size: 14px;
      color: #484D78;
      line-height: 14px;
    }

    .range {
      margin-left 20px
      display flex
      align-items center

      .text-wr {
        font-size: 14px;
        color: #484D78;

        .num {
          margin-left 5px
          font-size 12px
          color #E00703
        }

        .negative {
          color #33CD67
        }
      }

      .text-wr:last-child {
        margin-left 20px
      }
    }
  }

  .status-bar {
    margin-bottom 20px
    padding 0 20px
    margin-top 15px
    background: #F6F9FF;
    height: 30px;
    display flex
    align-items center

    .range-title {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #484D78;
      line-height: 12px;
      margin-right: 20px;
    }

    .range {
      margin-left: 50px;
    }

    .range:first-child {
      margin: 0;
    }

  }
}
</style>
